<template>
    <div class="w-dvw h-dvh flex justify-center items-center">
        <div class="w-[500px] h-[300px]">
            <RouterLink to="/" class="leading-[50px]">
                回到首页
            </RouterLink>
            <hr class="text-[#bbb]" />
            <p class="font-black leading-[50px]">
                成绩查询结果:
            </p>

            <template v-if="pageData.score !== -1">
                <p>
                    课程ID: {{ pageData.courseId }}
                </p>
                <p>
                    姓名: {{ pageData.studentName }}
                </p>
                <p>
                    成绩: {{ pageData.score }}
                </p>
            </template>

            <template v-else>
                <p>
                    未找到该生课程 [ {{ pageData.courseId }} ] 的成绩
                </p>
            </template>
        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { getApi } from '@/utils/request';

const route = useRoute()

const pageData = reactive
(
    {
        studentName: '',
        courseId: -1,
        score: -1,
    }
)

onMounted
(
    () =>
    {
        const { studentId, courseId } = route.params

        setPageData(studentId, courseId)
    }
)

const setPageData = async (studentId, courseId) =>
{
    pageData.courseId = courseId

    const res = await getApi
    (
        '/grade.php',
        {
            course_id: courseId,
            student_id: studentId
        }
    )

    if (res.stat !== 1)
    {
        alert(res.msg)
        return
    }
    
    pageData.studentName = res.data.student_name
    pageData.score = res.data.grade
    
}

</script>